<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" id="input">

    <button id="btn">onload</button>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        const input = document.getElementById("input")
        const btn = document.getElementById("btn")
        input.addEventListener("change", handleFileChange)
        btn.addEventListener("click", handleUpload)

        let fileObj = {}

        function handleFileChange(e) {
            console.log(e.target.files);
            const [file] = e.target.files
            fileObj = file
        }
        // 上传文件
        function handleUpload() {
            if (!fileObj) return
            const chunkList = createChunk(fileObj) // 进行切割
            // console.log(chunkList) // Blob类型的文件对象
            const chunks = chunkList.map(({ file }, index) => {
                return {
                    file,
                    size: file.size,
                    percent: 0,
                    chunkName: `${fileObj.name}-${index}`,
                    fileName: fileObj.name,
                    index
                }
            })
            console.log(chunks)
            // 发请求
            uploadChunks(chunks)
        }
        // 切片
        function createChunk(file, size = 5 * 1024 * 1024) {
            const chunkList = []
            let cur = 0
            while (cur < file.size) {
                // slice切
                chunkList.push({ file: file.slice(cur, cur + size) })
                // slice 切割成Blob类型的文件对象
                cur += size
            }

            return chunkList
        }

        // 请求
        function uploadChunks(chunks) {
            // console.log(chunks) 
            const formChunks = chunks.map(({ file, fileName, index, chunkName }) => {
                const formData = new FormData()
                formData.append('file', file)
                formData.append('fileName', fileName)
                formData.append('chunkName', chunkName)
                return { formData, index }
            }) // 将Blob类型的文件对象转成 FormData 表单类型的对象

            console.log(formChunks)
            const requestList = formChunks.map(({ formData, index }) => {
                return axios.post('http://localhost:3000/upload', formData, () => {
                    console.log(index) // 进度条
                })
            })

            // console.log(requestList)
            Promise.all(requestList).then(res => {
                console.log(res, '所有的片段都传输成功')
                mergeChunks()
            })

        }

        // 合并请求
        function mergeChunks(size = 5 * 1024 * 1024) {
            axios.post('http://localhost:3000/merge', {
                fileName: fileObj.name,
                size
            }).then(res => {
                console.log(`${fileObj.name}合并完成`)
            })
        }
    </script>
</body>

</html>